<template>
          <div>
        <div class="search">
            <el-input class="inputUser" v-model="userId" placeholder="请输入用户ID"></el-input>
            <el-input class="inputNumber" v-model="keyword" placeholder="请输入搜索历史关键字"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="用户搜索历史信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>
        </div>
        <!-- 表格内容 -->
        <el-table
            class="elTable"
            :data="tableData"
            border
            style="width: 1260px">
            <el-table-column
            class="id"
            prop="id"
            label="搜索ID"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="userId"
            label="用户ID"
            width="380">
            </el-table-column>
            <el-table-column
            prop="keyword"
            label="关键词"
            width="380">
            </el-table-column>
            <el-table-column
            prop="addTime"
            label="搜索时间"
            width="380">
            </el-table-column>
           
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>


</template>
<script>
import { historyList } from '@/api/userList'
export default{
    name:'serchHistory',
    props:[],
    data(){
        return{
            userId:'',
            keyword:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'用户搜索历史信息',//excel表格标题
            json_fields: {
                "反馈ID":'id',
                "用户名称":'username',
                "反馈内容":'content',
                "返回图片列表":'picUrls',
                "反馈时间":'addTime',
            },
            DetailsForm: [],
        }
    },
    methods:{
        // 搜索按钮
        search(){ 
            historyList({
                page:this.currentPage,
                limit:this.limit,
                userId:this.userId,
                keyword:this.keyword,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },

        // 分页方法
        handleSizeChange(e){
            this.limit=e
            console.log(this.limit);
            historyList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                id:this.id,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },
        handleCurrentChange(e){
            this.currentPage=e
            historyList({
                page:this.currentPage,
                limit:this.limit,
                username:this.nickname,
                id:this.id,
            }).then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
            })
        },
    },
    mounted(){
        let data ={
            page:'1',
            limit:'20',
            sort:'add_time',
            order:'desc',
        }
        historyList().then(res=>{
            console.log(res);
            this.tableData=res.data.items
            this.total=res.data.total
            this.DetailsForm=res.data.items
        })
    },
    // 计算属性
    computed:{

    }
}

</script>
<style lang="less" >
// 顶部查询框
.search{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    .inputUser{
        width: 200px;
        margin-left: 20px;
    }
    .inputNumber{
        width: 200px; 
        margin: 0 10px;
    }
}
// 表格内容
.elTable{
    margin-left: 20px;
    margin-top: 20px;
}
.cell{
    text-align: center;
}
// 分页
.block{
    margin-left: 20px;
    margin-top: 30px;
}
</style>